<div id="ajax_dialog" style="display:none;">
    <form id="ajax_upload" action="<?php echo $this->getUrl('*/*/upload') ?>" method="post" enctype="multipart/form-data">
        <input type="hidden" name="form_key" value="<?php echo $this->getFormKey(); ?>" />
        <input type="file" name="image"><br>
        <input type="submit" value="Upload File to Server">
        <input type="hidden" name="imgtype" value="" id="imgtype"/>
    </form>

    <div class="progress">
        <div class="bar"></div >
        <div class="percent">0%</div >
    </div>

    <div id="status"></div>
 </div>   

<script type="text/javascript">
(function() {    
    jQuery( "#ajax_dialog" ).dialog({
        autoOpen: false, 
        height: 300,
        width: 350,
        modal: true
    });
    jQuery(".panel-settings-link").click(function(){       
        jQuery('#imgtype').val('bg');
        jQuery( "#ajax_dialog" ).dialog("open");
    });
    jQuery(".custom-thumbnail-setting").click(function(){       
        jQuery('#imgtype').val('thumb');
        jQuery( "#ajax_dialog" ).dialog("open");
    }); 
    
var bar = jQuery('.bar');
var percent = jQuery('.percent');
var status = jQuery('#status');
   
jQuery('#ajax_upload').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    success: function() {
        var percentVal = '100%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {        
        var result = jQuery.parseJSON(xhr.responseText); 
        var active = jQuery('.ui-state-active').find('a.tab-link').attr('href');  
        if(active) {
            active = active.substring(1);                
        }
        var setitngs = jQuery('#'+active+' .panelsettings').val();                                                  
        bgsettings = JSON.parse(setitngs); 
        if('bg' == result['img_type']){
            jQuery('#'+active+' .md-slide-image img').attr('src', result['url']);            
            bgsettings.fid = result['url_path'];
        }
        else if('thumb' == result['img_type']){            
            bgsettings.thumb_fid = result['url_path'];
        }
        else if('insert_img' == result['img_type']){
            
        }
        jQuery('#'+active+' .panelsettings').val(JSON.stringify(bgsettings)); 
        jQuery('.ui-icon-closethick').trigger('click');
    }
}); 

})();       
</script>